import React, { useState, useEffect } from 'react';
import { Form, Button, Input, Select, Table, message, Modal } from "antd"
import { apiGetBroker, apiSearchBroker, apiDelBroker, apiStartBroker, apiStopBroker, apiAddEditBroker } from "../../api"
import Style from './index.module.scss'

const { Option } = Select;

// 经纪人管理
const User = () => {
    const [data, setData] = useState([])
    //请求数据
    const getUser = () => {
        apiGetBroker().then((res: any) => {
            setData(res.data.data);
        })
    }

    useEffect(() => {
        getUser()
    }, []);

    const columns: any = [
        {
            title: '序号',
            dataIndex: 'id',
            width: '5%',
            editable: true,
            render: (text: any, record: any, index: number) => {
                return index + 1
            },
        },
        {
            title: '姓名',
            dataIndex: 'name',
            editable: true,
        },
        {
            title: '手机号',
            dataIndex: 'cell',
            editable: true,
        }, {
            title: '公司',
            dataIndex: 'company',
            editable: true,
        }, {
            title: '新房',
            dataIndex: 'bridal',
            editable: true,
        }, {
            title: '二手房',
            dataIndex: 'second',
            editable: true,
        }, {
            title: '租房',
            dataIndex: 'renting',
            editable: true,
        }, {
            title: '状态',
            dataIndex: 'state',
            editable: true,
        },
        {
            title: '操作',
            dataIndex: 'id',
            render: (text: any, record: any, ind: number) => {
                return (
                    <div>
                        <Button type="link" onClick={() => handleEdit(record)}>编辑</Button>
                        <Button type="link" onClick={() => handleDelete(record)}>删除</Button>
                        <Button type="link" onClick={() => handleClickStart(record)}>启用</Button>
                        <Button type="link" onClick={() => handleClickStop(record)}>禁用</Button>
                    </div>
                )
            },
        },
    ];


    // 弹框受控
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [NameValue, setNameValue] = useState('')
    const [CellValue, setCellValue] = useState('')
    const [CompanyValue, setCompanyValue] = useState('')//公司

    // 编辑
    const [IdValue, setIdValue] = useState('')
    const handleEdit = (record: any) => {
        // 保存 id 名字 手机号
        setNameValue(record.name)
        setCellValue(record.cell)
        setIdValue(record.id)
        setStateValue(record.state)
        setCompanyValue(record.company)
        setIsModalVisible(true);
    }

    // 新增
    const Salenewlyadded = () => {
        setIsModalVisible(true);
    }

    const showModal = () => {
        setIsModalVisible(true);

    };

    // 确定
    const handleOk = () => {
        setIsModalVisible(false);
        // console.log(NameValue);
        // console.log(CellValue);
        // console.log(StateValue);
        // console.log(CompanyValue);
        // console.log(IdValue);
        apiAddEditBroker({ name: NameValue, cell: CellValue, id: IdValue, company: CompanyValue, state: StateValue }).then((res: any) => {
            // console.log(res);
            message.success(res.data.data)
            setData(res.data.data)
        })
    };

    // 取消
    const handleCancel = () => {
        setIsModalVisible(false);
        setNameValue('')
        setCellValue('')
        setIdValue('')
        setStateValue()
        setCompanyValue('')
    };



    //删除
    const handleDelete = (data: any) => {
        apiDelBroker({ id: data.id }).then((res: any) => {
            setData(res.data.data)
        })
    }


    // 启用 
    const handleClickStart = (data: any) => {
        apiStartBroker({ id: data.id }).then((res: any) => {
            message.success(res.data.msg)
            getUser()
        })
    }
    // 禁用
    const handleClickStop = (data: any) => {
        apiStopBroker({ id: data.id }).then((res: any) => {
            message.success(res.data.msg)
            // 重新调取数据
            getUser()
        })
    }


    // 查询
    const [CallValue, setCallValue] = useState('')
    const [StateValue, setStateValue]: any = useState()
    const onFinishSearch = () => {
        apiSearchBroker({ cell: CallValue, state: StateValue }).then(res => {
            if (res.data.data.length === 0) {
                message.error('占时没有数据')
            } else {
                message.success('查询成功')
                setData(res.data.data)
            }
        })
    }

    return (
        <div className={Style.box}>
            {/*  <p style={{ display: "flex" }}><span style={{ width: "70px" }}>标题 ：</span><Input placeholder='请输入标题' value={TitleValue} onChange={(e) => setTitleValue(e.target.value)}></Input></p> */}
            {/* 弹框 */}
            <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <p style={{ display: "flex" }}><span style={{ width: "70px" }}>姓名 ：</span><Input placeholder='请输入姓名' value={NameValue} onChange={(e) => setNameValue(e.target.value)}></Input></p>
                <p style={{ display: "flex" }}><span style={{ width: "70px" }}>手机号 ：</span><Input placeholder='请输入手机号' value={CellValue} onChange={(e) => setCellValue(e.target.value)}></Input></p>
                <p style={{ display: "flex" }}><span style={{ width: "70px" }}>公司 ：</span><Input placeholder='请输入公司' value={CompanyValue} onChange={(e) => setCompanyValue(e.target.value)}></Input></p>
                <div style={{ display: "flex" }}>
                    <span style={{ width: "70px" }}>状态 ：</span>
                    <Select placeholder='请选择' value={StateValue} style={{ width: 200 }}
                        onChange={(value: any) => setStateValue(value)}
                    >
                        <Option value="在职" key="1">在职</Option>
                        <Option value="离职" key="2">离职</Option>
                    </Select>
                </div>
            </Modal >


            <div className={Style.boxTop} >
                <Form name="horizontal_login" layout="inline" onFinish={onFinishSearch}>
                    <Form.Item>
                        <Input
                            placeholder='请输入经纪人姓名/手机号'
                            value={CallValue}
                            onChange={(e: any) => setCallValue(e.target.value)}
                        ></Input>
                    </Form.Item>

                    <Form.Item>
                        <Select placeholder="请选择" style={{ width: 200 }}
                            onChange={(value: any) => setStateValue(value)}
                        >
                            <Option value="在职" key="1">在职</Option>
                            <Option value="离职" key="2">离职</Option>
                        </Select>
                    </Form.Item>

                    <Form.Item shouldUpdate>
                        {() => (
                            <Button
                                htmlType="submit"
                            >
                                查询
                            </Button>
                        )}
                    </Form.Item>
                </Form>
                {/* 新增 */}
                <Button type="primary" onClick={Salenewlyadded}>
                    新增
                </Button>
            </div>

            <div className={Style.boxBom}>
                <Form component={false}>
                    <Table
                        bordered
                        columns={columns}
                        dataSource={data}
                        rowKey="id"
                        rowClassName="editable-row"
                    />
                </Form>
            </div>
        </div >
    );
}

export default User;